<div class="share-buttons">
    <div class="share-btn" id="share-btn">
        <i class="fas fa-share-alt"></i>
    </div>
    <div class="share-menu">
        <a href="#" class="share-item" data-type="weibo">
            <i class="fab fa-weibo"></i>
        </a>
        <a href="#" class="share-item" data-type="wechat">
            <i class="fab fa-weixin"></i>
        </a>
        <a href="#" class="share-item" data-type="twitter">
            <i class="fab fa-twitter"></i>
        </a>
        <a href="#" class="share-item" data-type="link">
            <i class="fas fa-link"></i>
        </a>
    </div>
</div>

<style>
.share-buttons {
    position: fixed;
    right: 6%;
    bottom: 30%;
    z-index: 999;
    display: none;
}

.share-btn {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.share-btn i {
    color: #666;
    font-size: 1.2rem;
}

.share-menu {
    position: absolute;
    bottom: 60px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.3s ease;
    visibility: hidden;
}

.share-menu.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    visibility: visible;
}

.share-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* 社交媒体颜色 */
.share-item[data-type="weibo"]:hover i { color: #e6162d; }
.share-item[data-type="wechat"]:hover i { color: #07c160; }
.share-item[data-type="twitter"]:hover i { color: #1da1f2; }
.share-item[data-type="link"]:hover i { color: #333; }

.share-item i {
    color: #666;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

/* 悬停效果 */
.share-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.share-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const shareButtons = document.querySelector('.share-buttons');
    const shareBtn = document.getElementById('share-btn');
    const shareMenu = document.querySelector('.share-menu');
    const shareItems = document.querySelectorAll('.share-item');
    
    // 监听滚动事件
    window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {  // 与火箭保持一致的滚动触发距离
            shareButtons.style.display = 'block';
        } else {
            shareButtons.style.display = 'none';
            // 当隐藏时，同时关闭分享菜单
            shareMenu.classList.remove('active');
        }
    });
    
    // 切换分享菜单
    shareBtn.addEventListener('click', () => {
        shareMenu.classList.toggle('active');
    });
    
    // 点击其他地方关闭菜单
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.share-buttons')) {
            shareMenu.classList.remove('active');
        }
    });
    
    // 分享处理
    shareItems.forEach(item => {
        item.addEventListener('click', (e) => {
            e.preventDefault();
            const type = item.dataset.type;
            const url = encodeURIComponent(window.location.href);
            const title = encodeURIComponent(document.title);
            
            switch(type) {
                case 'weibo':
                    window.open(`http://service.weibo.com/share/share.php?url=${url}&title=${title}`);
                    break;
                case 'wechat':
                    layer.ready(function(){
                        layer.open({
                            type: 1,
                            title: '微信扫码分享',
                            content: `<div style="padding: 20px; text-align: center;">
                                        <div id="qrcode"></div>
                                        <p style="margin-top: 10px;">打开微信扫一扫</p>
                                    </div>`,
                            area: ['300px', '350px'],
                            success: function() {
                                new QRCode(document.getElementById('qrcode'), window.location.href);
                            }
                        });
                    });
                    break;
                case 'twitter':
                    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`);
                    break;
                case 'link':
                    navigator.clipboard.writeText(window.location.href).then(() => {
                        layer.msg('链接已复制到剪贴板');
                    });
                    break;
            }
            
            shareMenu.classList.remove('active');
        });
    });
});
</script>

